<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>socket测试</title>
    <script type="application/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script type="application/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
    <div class="col-md-4"><button onclick="send()" style="display: block">发送信息</button></div>
    <div class="col-md-4"><button onclick="closeSocket()" style="display: block">关闭连接</button></div>
    <div class="col-md-4"><button onclick="startSocket()" style="display: block">启动连接</button></div>
</div>
<div class="row">
    <div class="col-md-12">
        <input id="socket_url" class="form-control" type="text" name="socket_url" value="ws://192.168.1.106:2346" />
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-lg-12 col-md-12"><label for="data">消息内容(json格式)</label><br></div>
    <div class="col-xs-12 col-lg-12 col-md-6">
        <textarea class="form-control" rows="10" id="data">{"s":"index/index/index","params":{"a":"b"}}</textarea>
    </div>
    <div class="col-xs-12 col-lg-12 col-md-6">
        <textarea id="receive" class="form-control" rows="10"></textarea>
    </div>
</div>
</body>
<script type="text/javascript">
    var ws,isClose=1,socketUrl;
    startSocket();
    function startSocket() {
        /*if(isClose === 0){
            input("已连接");
            return false;
        }*/
        isClose = 0;
        socketUrl = $("#socket_url").val();
        ws = new WebSocket(socketUrl);
        // 打开一个 web socket
        ws.onopen = function()
        {
            // Web Socket 已连接上，使用 send() 方法发送数据
            send();
        };

        ws.onmessage = function (evt)
        {
            var received_msg = evt.data;
            input("接受数据"+received_msg);
            isClose = 0;
        };

        ws.onclose = function()
        {
            isClose = 1;
            input("连接关闭")
        };
    }

    function send(d) {
        if(isClose){
            input("连接已关闭");
        }else{
            var data = $("#data").val();
            if(d !==undefined){
                ws.send(d);
            }else{
                ws.send(data);
            }
            input("发送数据" + data)
        }
    }

    function closeSocket() {
        if(isClose){
            input("连接已关闭");
        }else{
            input("发送关闭连接请求");
            ws.close();
        }
    }

    function input(str) {
        var textarea = $("#receive").append(str + "\n");
        textarea.scrollTop(textarea[0].scrollHeight - textarea.height());
    }
</script>
</html>